<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        /* 文本属性的继承 */
        body {
            font-size: 12px;
            line-height: 20px;
            color: #444;
        }

        .c {
            width: 1100px;
            height: 287px;
            margin: auto;
            background-color: #ddd;
        }

        .c1 {
            width: 512px;
            height: 287px;
            float: left;
            background-color: #ff0;
            margin-left: 50px;
        }

        .c2 {
            width: 538px;
            height: 287px;
            float: left;
            background-color: #f00;
        }

        .c h3 {
            background-color: #3a9bd5;
            color: #fff;
            line-height: 50px;
            font-size: 24px;
            text-align: center;
        }

        .c1 h3 {
            width: 121px;
        }

        .c2 h3 {
            width: 91px;
        }

        .c1 li {
            height: 118px;
        }

        .c1 li h4 {
            width: 124px;
            float: left;
            line-height: 34px;
            color: #3a9bd5;
        }

        .c1 li p {
            width: 346px;
            float: left;
            margin-top: 4px;
        }


        .d {
            width: 1100px;
            height: 382px;
            margin: auto;
            background-color: #eee;
        }

        .d1 {
            width: 300px;
            height: 287px;
            float: left;
            /* background-color: pink; */
            border-right: 1px solid #555;
        }

        .d2 {
            width: 298px;
            height: 287px;
            float: left;
            /* background-color: pink; */
            border-right: 1px solid #555;
        }

        .d3 {
            width: 449px;
            height: 287px;
            float: left;
        }

        .d h3 {
            width: 301px;
            background-color: #eee;
            line-height: 40px;
            padding-top: 58px;
        }

        .d2 h3 {
            margin-left: 36px;
        }

        .d3 h3 {
            margin-left: 20px;
        }

        .d h4 {
            text-align: right;
            margin-right: 10px;
            line-height: 12px;
            margin-bottom: 20px;
        }

        .d1 p {
            margin-right: 50px;
        }

        .mt20 {
            margin-top: 20px;
        }


        .e {
            width: 1100px;
            height: 50px;
            margin: auto;
            background-color: #ff0;
        }

        .e1 {
            width: 50px;
            height: 50px;
            float: left;
            background-color: #f00;
            margin-left: 50px;
        }

        .e2 {
            width: 646px;
            height: 48px;
            float: right;
            margin-right: 50px;
            border: 1px solid #000;
        }

        .e2 ul li {
            height: 48px;
            float: left;
        }

        .e2-1 {
            width: 210px;
        }

        .e2-2 {
            width: 220px;
        }

        .e2-3 {
            width: 210px;
        }

        .e2 li img {
            margin-left: 13px;
            margin-top: 12px;
            float: left;
        }

        .e2 li span {
            float: left;
            margin-left: 9px;
            margin-top: 7px;
            line-height: 34px;
            border-right: 1px solid #000;
            padding-right: 8px;
        }

        .e2 li p {
            margin-top: 6px;
            margin-left: 10px;
            float: left;
        }
    </style>
</head>

<body>

    <!-- service -->
    <div class="c">
        <div class="c1">
            <h3>SERVICES</h3>
            <ul>
                <li>
                    <h4>简约版套餐</h4>
                    <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
                </li>
                <li>
                    <h4>简约版套餐</h4>
                    <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
                </li>
            </ul>
        </div>
        <div class="c2">
            <h3>CASES</h3>
        </div>
    </div>


    <!-- about us -->
    <div class="d">
        <div class="d1">
            <h3>关于我们</h3>
            <h4><a href="">MORE+</a></h4>
            <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
            <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
            <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
            <p class="mt20">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
        </div>
        <div class="d2">
            <h3>关于我们</h3>
        </div>
        <div class="d3">
            <h3>关于我们</h3>
        </div>
    </div>

    <!--  -->
    <div class="e">
        <div class="e1"></div>
        <div class="e2">
            <ul>
                <li class="e2-1">
                    <img src="../images/gotoway_03.jpg" alt="">
                    <span>联系我们</span>
                    <p>QQ在线联系 <br> 文字呜呜呜呜 </p>
                </li>
                <li class="e2-2">
                    <img src="../images/gotoway_05.jpg" alt="">
                    <span>联系我们</span>
                    <p>QQ在线联系 <br> 文字呜呜呜呜 </p>
                </li>
                <li class="e2-3">
                    <img src="../images/gotoway_07.jpg" alt="">
                    <span>联系我们</span>
                    <p>QQ在线联系 <br> 文字呜呜呜呜 </p>
                </li>
            </ul>
        </div>
    </div>

</body>

</html>